@extends("admin.layout.main")

@section("content")
    <style>
        .demo-img{
            max-width: 100%;
            max-height:100%;
        }
    </style>
    <div id="app" style="width: 100%">

        <Modal title="查看大图" v-model="visible" class-name="fl-image-modal">
            {{--<img :src="imgUrl" v-if="visible" style="width: 100%">--}}
            {{--<template style="width: 100%">--}}
                <Carousel   style="width:500px;text-align:center;" v-model="imageValue" >
                    <div v-for="item in images" >
                        <Carousel-Item>

                            <img  v-bind:src="item" style="max-width:500px;height:300px;cursor:pointer;" />


                        </Carousel-Item>
                    </div>
                </Carousel>
            {{--</template>--}}
        </Modal>

        <Modal title="添加规格" v-model="skuModal" class-name="fl-image-modal" @on-ok="addSku">
            <span>
                货号:
                <i-input disabled v-model="product_no"></i-input>
            </span>
            <span>
                颜色:
                <i-input  v-model="add.sku_color"></i-input>
            </span>
            <span>
                尺寸:
                <i-input  v-model="add.sku_size"></i-input>
            </span>
            <span>
                库存:
                <i-input  v-model="add.sku_stock"></i-input>
            </span>
            <span>
                成本价:
                <i-input  v-model="add.sku_cost_price"></i-input>
            </span>
            <span>
                售价:
                <i-input  v-model="add.sku_price"></i-input>
            </span>
        </Modal>

        <Modal title="编辑" v-model="editModal" @on-ok="upEditGoods" @on-cancel="cancelGoods">
            <div style="width: 100%">
                <span>
                    操作类型:
                    <i-select v-model="type" >
                        <i-option value="1">添加</i-option>
                        <i-option value="2">编辑</i-option>
                    </i-select>
                </span>
                <span >
                    放心购产品id:
                    <i-input placeholder="请输入放心购平台产品id（编辑类型必须填写）" v-model="goods_id"></i-input>
                </span>
                <span>
                    店铺:
                    <i-select v-model="shop">
                        <i-option v-for="shop in shops" :value="shop.shop_id">@{{ shop.shop_name }}</i-option>
                    </i-select>
                    <p style="color: red">@{{ checkMsg }}</p>
                </span>
                <span>
                    品牌:
                    <i-select  v-model="brand">
                              <i-option v-for="brand of brandList" :value="brand.id">@{{ brand.brand_chinese_name }}</i-option>
                    </i-select>
                </span>
                <span>
                    分类:
                    <i-select v-model="third_cid">
                        <i-option v-for="(third,index) in third_cid_arr" :value="third.id">@{{ third.name }}</i-option>
                    </i-select>
                </span>
                <span>
                    产品图:
                    <checkbox-group v-model="prodImg">
                                <Checkbox  v-for="image in images" :label="image">
                                    <img :src="image" style="max-width: 50px;max-height: 50px;margin-left: 3px"/>
                                </Checkbox>
                    </checkbox-group>
                </span>
                <span>
                    详情图:
                    <checkbox-group v-model="descImg">
                                <Checkbox  v-for="image in images" :label="image">
                                    <img :src="image" style="max-width: 50px;max-height: 50px;margin-left: 3px"/>
                                </Checkbox>
                    </checkbox-group>
                </span>
            </div>
        </Modal>

        {{--主体代码--}}
        <Row type="flex" justify="center" align="middle">

            <i-col span="24" >
                <span>
                    内部货号:
                     <i-input v-model="search.prod_no" style="width:200px"></i-input>
                </span>
                <span>
                    &nbsp&nbsp外部货号:
                     <i-input v-model="search.prod_out_no" style="width:200px"></i-input>
                </span>
                <span>
                    &nbsp&nbsp创建人:
                     <i-input v-model="search.creator" style="width:200px"></i-input>
                </span>
                <span>
                    &nbsp&nbsp厂家:
                     <i-input v-model="search.manu_name" style="width:200px"></i-input>
                </span>
                <span>
                     <i-button type="primary"  @click="searchList">搜索</i-button>
                </span>
            </i-col>

        </Row>
        <Row  justify="center" align="middle" >
            <i-col  style="margin-top: 20px;width: 100%">
                <i-table size="large"  ref="selection" :data="tableData" :columns="tableColumns" >
                    <!-- 可展开 -->
                    <template slot="expandRow" slot-scope="props">
                        <div style="padding:16px;">
                            <Row>
                                <i-table  :data="props.row" :columns="column2" stripe>
                                </i-table>
                            </Row>
                        </div>
                    </template>
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>



    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    token:'',
                    tableColumns: [
                        {
                            title:'SKU',
                            type: 'expand',
                            width:100,
                            render: (h, params) => {
                                return h(
                                    'div',
                                    this.$refs.selection.$scopedSlots.expandRow({ row: params.row.skus })
                                );
                            }
                        },
                        {
                            title: '图片',
                            width:450,
                            render: (h,params) => {
                                let row = params.row;
                                let imgs = JSON.parse(row.prod_img);
                                let img_arr = [];
                                for(let i=0;i<imgs.length;i++){
                                    let img = imgs[i];
                                    img_arr.push(
                                        h('img',{
                                            style:{
                                                'margin':'5px',
                                                'max-width':'50px',
                                                'max-height':'50px',
                                                'cursor': 'pointer',
                                            },
                                            attrs:{
                                                'src': img,
                                            },
                                            on:{
                                                click:(e)=>{
                                                    this.handleView(imgs,i)
                                                }
                                            }
                                        })
                                    );
                                }
                                return h('div',img_arr)

                            }

                        },
                        {
                            title: '产品名称',
                            key: 'prod_name',
                            width:200,
                            render: (h,params) => {
                                let prod_name = params.row.prod_name;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '150px'
                                        },
                                        attrs:{
                                            'value':prod_name
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('prod','prod_name',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }
                        },
                        {
                            title: '内部货号',
                            key: 'prod_no',

                        },
                        {
                            title: '成本价',
                            key: 'cost_price',
                            render: (h,params) => {
                                let cost_price = params.row.cost_price;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '50px'
                                        },
                                        attrs:{
                                            'value':cost_price
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('prod','cost_price',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }
                        },
                        {
                            title: '售价',
                            key: 'prod_price',
                            render: (h,params) => {
                                let prod_price = params.row.prod_price;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '50px'
                                        },
                                        attrs:{
                                            'value':prod_price
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('prod','prod_price',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }

                        },
                        {
                            title: '操作',
                            key: 'action',
                            align: 'center',
                            width:300,
                            render: (h, params) => {

                                let prod_no = params.row.prod_no;
                                return h('div', [
                                    h('i-button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'click': ()=>{
                                                this.editGoods(params.row);
                                            }
                                        }
                                    }, "上架"),
                                    h('i-button', {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'click': ()=>{
                                                this.sku(params.row);
                                            }
                                        }
                                    }, "添加规格"),
                                    h('i-button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'click': ()=>{
                                                window.open('/admin/goods/item?prod_no='+prod_no)
                                            }
                                        }
                                    }, "打印预览")

                                ]);

                            }
                        }

                    ],
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 20,
                    },
                    tableData: [],
                    search:{
                        prod_no:'',
                        prod_out_no:'',
                        manu_name:'',
                        creator:''
                    },
                    column2:[
                        {
                            title:'sku编码',
                            key:'sku_no'
                        },
                        {
                            title:'颜色',
                            key:'sku_color',
                            render: (h,params) => {
                                let sku_color = params.row.sku_color;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '80px'
                                        },
                                        attrs:{
                                            'value':sku_color
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('sku','sku_color',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }
                        },
                        {
                            title:'尺寸',
                            key:'sku_size',
                            render: (h,params) => {
                                let sku_size = params.row.sku_size;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '80px'
                                        },
                                        attrs:{
                                            'value':sku_size
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('sku','sku_size',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }
                        },
                        {
                            title:'库存',
                            key:'sku_stock',
                            render: (h,params) => {
                                let sku_stock = params.row.sku_stock;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '80px'
                                        },
                                        attrs:{
                                            'value':sku_stock
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('sku','sku_stock',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }
                        },
                        {
                            title:'成本价',
                            key:'sku_cost_price',
                            render: (h,params) => {
                                let sku_cost_price = params.row.sku_cost_price;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '80px'
                                        },
                                        attrs:{
                                            'value':sku_cost_price
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('sku','sku_cost_price',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }
                        },
                        {
                            title:'售价',
                            key:'sku_price',
                            render: (h,params) => {
                                let sku_price = params.row.sku_price;
                                return h('div', [
                                    h('i-input', {
                                        style: {
                                            width: '80px'
                                        },
                                        attrs:{
                                            'value':sku_price
                                        },
                                        on: {
                                            'on-blur': (event)=>{
                                                this.editData('sku','sku_price',event,params.row);
                                            }
                                        }
                                    })
                                ]);
                            }
                        },
                        {
                            title: '操作',
                            key: 'action',
                            align: 'center',
                            width:200,
                            render: (h, params) => {
                                return h('div', [
                                    h('i-button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'click': ()=>{
                                                this.deleteSku(params.row);
                                            }
                                        }
                                    }, "删除")

                                ]);

                            }
                        }
                    ],
                    permission_ids:[],
                    origin_permissions:[],
                    visible:false,
                    imgUrl:'',
                    editModal:false,
                    third_cid_arr:[
                        {
                            "id": 408,
                            "name": "女士牛仔裤",
                            "level": 3
                        }, {
                            "id": 409,
                            "name": "女士马甲",
                            "level": 3
                        }, {
                            "id": 410,
                            "name": "女士雪纺衫",
                            "level": 3
                        }, {
                            "id": 411,
                            "name": "女士夹克外套",
                            "level": 3
                        }, {
                            "id": 412,
                            "name": "女士小西装",
                            "level": 3
                        }, {
                            "id": 413,
                            "name": "女士卫衣",
                            "level": 3
                        }, {
                            "id": 414,
                            "name": "女士风衣",
                            "level": 3
                        }, {
                            "id": 415,
                            "name": "女士打底裤",
                            "level": 3
                        }, {
                            "id": 416,
                            "name": "女士休闲裤",
                            "level": 3
                        }, {
                            "id": 417,
                            "name": "女士正装裤",
                            "level": 3
                        }, {
                            "id": 418,
                            "name": "女士皮衣皮草",
                            "level": 3
                        }, {
                            "id": 419,
                            "name": "连衣裙",
                            "level": 3
                        }, {
                            "id": 420,
                            "name": "半身裙",
                            "level": 3
                        }, {
                            "id": 421,
                            "name": "女士毛呢大衣",
                            "level": 3
                        }, {
                            "id": 422,
                            "name": "女士棉服",
                            "level": 3
                        }, {
                            "id": 423,
                            "name": "女士衬衫",
                            "level": 3
                        }, {
                            "id": 424,
                            "name": "女士T恤",
                            "level": 3
                        }, {
                            "id": 425,
                            "name": "女士针织衫",
                            "level": 3
                        }, {
                            "id": 426,
                            "name": "中老年女装",
                            "level": 3
                        }, {
                            "id": 427,
                            "name": "大码女装",
                            "level": 3
                        }, {
                            "id": 428,
                            "name": "婚纱",
                            "level": 3
                        }, {
                            "id": 429,
                            "name": "女士打底衫",
                            "level": 3
                        }, {
                            "id": 430,
                            "name": "女士旗袍唐装",
                            "level": 3
                        }, {
                            "id": 431,
                            "name": "女士加绒裤",
                            "level": 3
                        }, {
                            "id": 432,
                            "name": "女士吊带背心",
                            "level": 3
                        }, {
                            "id": 433,
                            "name": "女士羊绒衫",
                            "level": 3
                        }, {
                            "id": 434,
                            "name": "女士短裤",
                            "level": 3
                        }, {
                            "id": 435,
                            "name": "女士皮草",
                            "level": 3
                        }, {
                            "id": 436,
                            "name": "女士礼服",
                            "level": 3
                        }, {
                            "id": 437,
                            "name": "女士皮衣皮草",
                            "level": 3
                        }, {
                            "id": 438,
                            "name": "女士羊毛衫",
                            "level": 3
                        }, {
                            "id": 439,
                            "name": "女士设计师潮牌",
                            "level": 3
                        }, {
                            "id": 440,
                            "name": "女士羽绒服",
                            "level": 3
                        }, {
                            "id": 2754,
                            "name": "女士连体裤背带裤",
                            "level": 3
                        }, {
                            "id": 2755,
                            "name": "女士皮裤",
                            "level": 3
                        }, {
                            "id": 2756,
                            "name": "女士polo衫",
                            "level": 3
                        }, {
                            "id": 2757,
                            "name": "女士毛衣",
                            "level": 3
                        }
                    ],
                    third_cid:'',
                    images:[],
                    prodImg:[],
                    descImg:[],
                    shops:[],
                    shop:'',
                    type:'1',
                    goods_id:'',
                    product_no:'',
                    brandList:[],
                    brand:'',
                    skuModal:false,
                    add:{
                        sku_color:'',
                        sku_size:'',
                        sku_stock:'0',
                        sku_price:'100',
                        sku_cost_price:'0'
                    },
                    imageValue:0,
                    checkMsg:'',
                }
            },
            mounted() {
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods:{
                handleView(imgs,index){
                    //var url = url.replace('!200x200','');
                   // this.imgUrl = url;
                    this.imageValue =   index;
                    this.images = imgs;
                    this.visible = true;
                },
                cancelGoods(){
                    this.descImg    =   [];
                    this.prodImg    =   [];
                },
                searchList(){
                    this.getList(1);
                },
                getList(page){
                    axios.get('/admin/goods/list', {
                        params: {
                            token:vm.token,
                            page: page,
                            pageSize:this.page.pageSize,
                            prod_no:this.search.prod_no,
                            prod_out_no:this.search.prod_out_no,
                            manu_name:this.search.manu_name,
                            creator:this.search.creator,
                        }
                    }).then((response) => {
                        console.log(response.data.data);
                        vm.tableData = response.data.data;
                        vm.page.total = response.data.total;
                    })
                },
                getShop() {   //  初始化店铺
                    axios.get("https://order.youdnr.com/api/temai/order/fxg_shop_list",{
                    })
                        .then(function (response) {
                            vm.shops = response.data.result;
                        });
                },
                editData(type,key,event,row){ //修改产品数据
                    let value = event.target.value;
                    let no = '';
                    if(type == 'prod_no'){
                        no  =   row.prod_no;
                    }else{
                        no  =   row.sku_no;
                    }
                    axios.get('/api/goods/edit_prod_data', {
                        params: {
                            token:vm.token,
                            type:type,
                            key:key,
                            value:value,
                            no:no
                        }
                    }).then((response) => {
                        vm.$Message.success('更新完成');

                    })
                },
                deleteSku(row){ //  删除sku
                    console.log(row);
                    axios.get('/api/goods/prod_del', {
                        params: {
                            token:vm.token,
                            sku_no:row.sku_no
                        }
                    }).then((response) => {
                        vm.$Message.success('删除完成');
                        vm.getList(1);

                    })
                },
                sku(row){
                    console.log(row);
                    this.skuModal = true;
                    this.product_no = row.prod_no;
                },
                addSku(){ //  删除sku
                    console.log(this.add);
                    axios.get('/api/goods/prod_add', {
                        params: {
                           // token:vm.token,
                            sku_size:this.add.sku_size,
                            sku_color:this.add.sku_color,
                            sku_stock:this.add.sku_stock,
                            sku_price:this.add.sku_price,
                            prod_no:this.product_no,
                            sku_cost_price:this.add.sku_cost_price
                        }
                    }).then((response) => {
                        vm.$Message.success('添加完成');
                        vm.getList(1);

                    })
                },
                editGoods(row){
                    console.log(row);
                    this.descImg = JSON.parse(row.prod_img);
                    this.prodImg = JSON.parse(row.prod_img);
                    vm.images =   JSON.parse(row.prod_img);
                    this.product_no = row.prod_no;
                    this.brand = '';

                    if(localStorage.getItem('shop')){
                        this.shop           =   parseInt(localStorage.getItem('shop'));
                        this.checkProdShop();
                    }
                    this.third_cid      =   parseInt(localStorage.getItem('third_cid'));
                    this.editModal = true;

                },
                upEditGoods(){
                    localStorage.setItem('shop',this.shop);
                    localStorage.setItem('third_cid',this.third_cid);
                    let checkStatus = this.dataCheck();
                    if(checkStatus){
                        axios.get('/api/goods/edit_prod', {
                            params: {
                                token:vm.token,
                                goods_id:this.goods_id,
                                prod_no:this.product_no,
                                prodImg:this.prodImg,
                                descImg:this.descImg,
                                third_cid:this.third_cid,
                                shop:[this.shop],
                            }
                        }).then((response) => {
                            vm.createApiProd();
                        })
                    }
                },
                createApiProd(){
                    axios.get('/api/goods/create_prod', {
                        params: {
                            type:this.type,
                            prod_no:this.product_no,
                            brand:this.brand
                        }
                    }).then((response) => {
                        vm.$Message.success('上传成功');
                    })
                },
                dataCheck(){
                    if(this.prodImg.length == 0 || this.prodImg.length > 5){
                        vm.$Message.error('产品图介于1-5张');
                        return false;
                    }
                    if(this.descImg.length == 0){
                        vm.$Message.error('详情图不能为空');
                        return false;
                    }
                    if(this.type == 2 && this.goods_id == ''){
                        vm.$Message.error('编辑状态必须填写产品id');
                        return false;
                    }
                    if(this.third_cid == ''){
                        vm.$Message.error('请填写分类id');
                        return false;
                    }
                    if(this.shop == ''){
                        vm.$Message.error('请选择店铺');
                        return false;
                    }
                    if(this.type == ''){
                        vm.$Message.error('请填写操作类型');
                        return false;
                    }
                    if(this.type == 1 && this.brand == ''){
                        vm.$Message.error('添加产品，品牌不能为空');
                        return false;
                    }
                    return true;
                },
                checkProdShop(){
                    //校验
                    axios.get("/api/goods/check_prod",{
                            params: {
                                shop_id:this.shop,
                                prod_no:this.product_no
                            }
                        }
                    )
                    .then(function (response) {
                        vm.checkMsg = '';
                        if(response.data.result){
                            vm.checkMsg = '提示：该商品已在该店铺上架过-'+vm.product_no;
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }


            },
            watch:{
                shop(){
                    //this.brand = '';
                    let that = this;
                    //品牌列表
                    axios.get("/api/goods/brand_list",{
                            params: {
                                shop_id:this.shop
                            }
                        }
                    )
                    .then(function (response) {
                        that.brandList = response.data.data;
                        vm.brand  =   response.data.data[0].id;
                        console.log(this.brand);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

                    this.checkProdShop();


                },
//                'prodImg':{
//                    handler: function (Val,oldVal){
//                        console.log(Val);
//                        this.prodImg    =   vm.images;
//                    },
//                    deep: true,
//                },
//                'descImg':{
//                    handler: function (Val,oldVal){
//                        console.log(Val);
//                        this.descImg    =   vm.images;
//                    },
//                    deep: true,
//                }
            },



        });

        vm.token = getToken();
        vm.getShop();
        vm.getList(1);
    </script>

@endsection

